<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../../stores/auth'

const user = ref('')
const passwd = ref('')
const router = useRouter()
const auth = useAuthStore()

function doLogin(){
  if (!user.value || !passwd.value) {
    ElMessage.warning('账号密码不能为空，请重新输入')
    return
  }
  if (user.value === 'admin' && passwd.value === 'admin') {
    auth.login('token_admin', 'admin')
    ElMessage.success('登录成功')
    router.push('/client/HomePage')
  } else {
    ElMessage.error('账号或密码错误')
  }
}

function visitAsGuest(){
  // 不修改登录状态，直接进入首页
  router.push('/client/HomePage')
}
</script>
<template>
  <div class="login-main">
    <div class="login_box">
        <h2>LOGIN</h2>
        <div id="input_box">
        <input type="text" placeholder="请输入用户名" v-model="user">
        </div>
        <div class="input_box">
        <input type="password" placeholder="请输入密码" v-model="passwd">
        </div>
        <button @click="doLogin">登录</button><br>
        <button class="ghost" @click="visitAsGuest" style="margin-top:12px">游客访问</button>
    </div>
  </div>
</template>
<style scoped>
    .login-main {
      height: 100vh;
      width: 100%;
      background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
      background-size: 100% 130%;
      position: relative;
    }

    .login_box {
      width: 20%;
      height: 400px;
      background-color: #00000060;
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
</style>